<template>
  <p-modal
    title="设置显示字段"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :mask-closable="false"
    :top="600"
    :get-container="getContainer"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p-table
      :columns="columns"
      row-key="dataIndex"
      :data-source="dataSource"
      :scroll="{ y: 300 }"
      bordered
      :pagination="false"
    />
  </p-modal>
</template>
<script>
export default {
  props: {
    getContainer: {
      type: Function,
      default: () => document.body,
    },
    localKey: {
      type: String,
      default: 'local-key',
    },
    defaultShow: {
      type: Array,
      default: () => [],
    },
    defaultFixed: {
      type: Array,
      default: () => [],
    },
    show: {
      type: Array,
      default: () => [],
    },
    fixed: {
      type: Array,
      default: () => [],
    },
    visible: {
      type: [Boolean],
      default: false,
    },
    fileds: {
      type: Array,
      default: () => [
        {
          dataIndex: 'customerCode',
          title: '客户简称',
          required: true,
        },
        {
          title: '客户项目',
          dataIndex: 'item',
          required: false,
        },
      ],
    },
  },
  data() {
    return {
      showKeys: [],
      fixedKeys: [],
    };
  },
  computed: {
    columns() {
      return [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '是否显示',
          dataIndex: 'dataIndex',
          width: 80,
          customRender: (value, row, index) => {
            return (
              <p-checkbox
                checked={this.showKeys.includes(value)}
                disabled={row.required}
                vOn:change={(e) =>
                  this.handleCheckbox(e, value, row, index, 'showKeys')
                }
              />
            );
          },
        },
        {
          align: 'center',
          title: '是否固定',
          dataIndex: 'dataIndex',
          width: 80,
          customRender: (value, row, index) => {
            return (
              <p-checkbox
                checked={this.fixedKeys.includes(value)}
                vOn:change={(e) =>
                  this.handleCheckbox(e, value, row, index, 'fixedKeys')
                }
              />
            );
          },
        },
        {
          align: 'center',
          title: '字段名称',
          dataIndex: 'title',
        },
      ];
    },
    dataSource() {
      return this.fileds
        .filter(
          (item) =>
            item.dataIndex &&
            !item.isHide &&
            !item.noOperate &&
            item.dataIndex !== 'selection'
        )
        .map((item) => {
          return {
            dataIndex: item.dataIndex,
            title: item.title,
            required: item.required,
          };
        });
    },
  },
  mounted() {
    console.log('this.localKey: ', this.localKey);
    const content = JSON.parse(
      window.localStorage.getItem(this.localKey) || '{}'
    );
    const show = this.defaultShow.length
      ? this.defaultShow
      : [...this.dataSource.map((item) => item.dataIndex)];
    this.showKeys = content.showKeys || show;
    this.fixedKeys = content.fixedKeys || this.defaultFixed;
    this.$emit('update:show', [...this.showKeys]);
    this.$emit('update:fixed', [...this.fixedKeys]);
  },
  methods: {
    handleCheckbox(e, value, row, index, key) {
      if (e.target.checked) {
        this[key].push(value);
      } else {
        this[key] = this[key].filter((item) => item !== value);
      }
    },
    handleCancel() {
      this.$emit('update:visible', false);
    },
    handleOk() {
      if (this.showKeys.length) {
        this.$emit('update:show', [...this.showKeys]);
        this.$emit('update:fixed', [...this.fixedKeys]);
        window.localStorage.setItem(
          this.localKey,
          JSON.stringify({
            showKeys: this.showKeys,
            fixedKeys: this.fixedKeys,
          })
        );
        this.handleCancel();
      } else {
        this.$message.error('请选择显示字段！');
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .poros-table-tbody > tr > td {
  padding: 2px;
}
/deep/ .poros-table-thead > tr > th {
  padding: 0;
}
</style>
